.modal{
  @include position(fixed, 0 , 0 100%, 100% );
  z-index:10;
  transition: all .5s;
  .mask{
    @include position(fixed, 0 , 0 100%, 100% );
    background:rgba(0, 0, 0 , 0.5 );
  }
  &.slide-enter-active{
    top:0%;
  }
  &.slide-leave-active{
    top:-100%;
  }
  &.slide-enter{
    top:-100%;
    transition: all .5s;
  }
  .modal-dialog{
    @include position(absolute, 40% , 50% , 660px , auto);
    background:$colorG;
    transform: translate(-50%,-50%);
    .modal-header{
      line-height:60px;
      background: $colorJ;
      padding:0 25px;
      font-size:16px;
      .icon-close{
       @include positionImg(absolute,23px,25px,14px,14px,"/imgs/icon-close.png");
       transition:transform .2s ;
       &:hover{
         transform: scale(1.5);
       }
      }
    }
    .modal-body{
      padding:42px 40px 54px;
      font-size:14px;
    }
    .modal-footer{
      line-height:82px;
      text-align: center;
      background: $colorJ;
    }
  }
}